<template>
    <div class="container"
        :class="{'main-light': !$store.state.isDarkMode, 'main-dark': $store.state.isDarkMode}"
    >
        <!-- 已登陆显示内容 -->
        <div class="isLogin" v-if="currUser">
            <div class="container-userInfo">
                <!-- 用户头像 -->
                <div class="userImg">
                    <img :src="currUser.userImg" alt="">
                </div>
                <!-- 用户部分信息 -->
                <div class="userInfo">
                    <span class="userName">
                        {{ currUser.userName }} 
                    </span>
                    <span class="userLevel">
                        LV<span class="userLevel-number"> {{ currUser.userLevel }} </span>
                    </span>

                    <br>
                    <span class="vip">
                        年度大会员
                    </span>
                    <br>
                    <span class="point">
                        BP币: {{ currUser.bqCore }}&nbsp;&nbsp;
                        硬币: {{ currUser.core }} 
                    </span>
                </div>
            </div>
            <!-- 用户其他信息 动态数 关注数 粉丝数 -->
            <div class="otherInfo">
                <ul>
                    <li>
                        <span class="number">{{ currUser.moments }}</span><br>
                        <span class="title">动态</span>
                    </li>
                    <li>
                        <span class="number">{{ currUser.subscribe }}</span><br>
                        <span class="title">关注</span>
                    </li>
                    <li>
                        <span class="number">{{ currUser.follower }}</span><br>
                        <span class="title">粉丝</span>
                    </li>
                </ul>
            </div>
        </div>
        
        <!-- 未登录显示内容 -->
        <div class="unLogin" v-if="!currUser">
            <div class="container-userInfo">
                <span style="font-size: 20px;">您还未登录，请先 
                    <span class="login" @click="onLoginBtnDown()">
                        登录
                    </span> 
                    ！
                </span> 
            </div>                    
        </div>


        <h2>更多服务</h2>
        <bp-cell-group>
            <bp-cell title="联系客服" content=">"/>
            <bp-cell title="青少年守护" content=">"/>
            <bp-cell title="设置" content=">" to="/setPage"/>
        </bp-cell-group>
    </div>
</template>

<script>
import BpCellGroup from './BpCellGroup.vue';
import BpCell from './BpCell.vue';

export default {
    name: 'MyPage',
    components: {
        BpCell,
        BpCellGroup
    },  
    props:["currUser", "Login"],
    methods:{
        /* 登录按钮按下 */
        onLoginBtnDown(){
            this.$router.push('/loginPage')
        }
    }
}
</script>

<style lang="less" scoped>
h2 {
    font-size: 18px;
    font-weight: bold;
    margin: 10px 15px;
    color: white;
    text-shadow: 0px 0px 10px rgb(194, 59, 99);
}

.container {
    height: 100vh;
    overflow: hidden;

    .container-userInfo {
        margin: 50px 0 0;
        padding: 10px;
        display: flex;
        height: 100px;
        overflow: hidden;
        align-items: center;
        .userImg {
            margin: 20px 20px 20px 10px;
            height: 75px;
            width: 75px;
            border-radius: 40px;
            overflow: hidden;

            img {
                height: 100%;
                width: 100%;
            }
        }

        .userInfo {
            line-height: 1.6em;
            padding-top: 5px;

            .userName {
                font-size: 19px;
                color: rgb(255, 100, 139);
                margin-right: 5px;
            }
            .userLevel {
                margin-left: 5px;
                @levelColor: #e97618;
                vertical-align: 3px;
                font-family: '像素风字体';
                font-size: 12px;
                font-weight: bolder;
                color: white;
                text-shadow: 1.5px 1.5px @levelColor,
                            -1.5px -1.5px @levelColor,
                            -1.5px 1.5px @levelColor,
                            1.5px 0px @levelColor,
                            -1.5px 0px @levelColor,
                            0px 1.5px @levelColor,
                            0px -1.5px @levelColor,
                            1.5px -1.5px @levelColor;
                .userLevel-number {
                    font-size: 14px;
                }
            }
            .vip {
                    padding: 0 6px;
                    color: white;
                    font-weight: bold;
                    font-size: 14px;
                    background-color: rgb(255, 79, 108);
                    border: 1px solid rgb(231, 231, 231);
                    border-radius: 1em;
            }
            .point {
                font-size: 12px;
            }
        }
    }
}
.otherInfo {
    height: 100px;
    width: 100vw;

    ul {
        margin: 0 auto;
        width: 100%;
        
        li {
            float: left;
            height: 2em;
            width: 32%;
            font-size: 20px;
            text-align: center;
            border-left: 2px solid rgba(134, 134, 134, 0.5);    

            .title {
                font-size: 16px;
                color: rgba(131, 131, 131, 0.9);
            }
        }
        li:first-child {
            border-left: 0; 
        }
    }

}

.login {
    color: rgb(194, 59, 99);
    font-weight: bold;
}
.login:active {
    text-decoration: underline;
}
</style>